<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="李军锋">
    <title></title>
    <style>
       *{
           box-sizing: border-box;
       }
       body{
           background-color: #aaa;
       }
       .box{
           width: 390px;
           margin: 0 auto;
       }
       .big{
           background-color: white;
           padding: 10px;
           position: relative;
       }
       .big p{
           padding: 10px;
       }
       .overlay{
           width: 100%;
           height: 100%;
           position: absolute;
           top: 0;
           left: 0;
       }
       .big .overlay{
           border: 5px solid orange;
           display: none;
       }
       ul{
           margin: 0;
           padding: 0;
           list-style: none;
           display: flex;
           width: 370px;
           margin-top: 10px;
           background-color: white;
           justify-content: space-between;
       }
       li{
           position: relative;
           width: 170px;
           overflow: hidden;
       }
       li .overlay{
         background-color: #000;
         opacity: 0.5;
       }
       li p{
           width: 100%;
           height: 100%;
           position: absolute;
           top: 0;
           left: 0;
           font-size: 12px;
           padding: 20px;
           overflow: hidden;
       }
       li p span{
           display: hidden;
       }
    </style>
</head>
<body>
    <div class="box">
        <div class="big">
            <img src="./img/1.png" alt="">
            <p>空间的疯狂攻击罚款决定是否开始就的空间访客的历史
                楼市疯狂的斯洛伐克放得开了斯洛伐克分类；肯定是浪费
                的是洛克菲勒的时间了的机卡分离式街坊地块附近疯狂的
                的富兰克林的到了疯狂的历史对方快乐对方离开登录客服
                时刻记得开始即可就放得开了看空间的降幅可达防丢囧附
            </p>
            <div class="overlay">
                 </div>
        </div>
                <ul>
                    <li>
                        <img src="./img/2.png" alt="">
                        <p>
                            <span>
                                是浪费健康的浪费狂蜂浪蝶看，三大利空放大了
                                类似的开发力度卡拉蜂了，的疯狂了的是就了
                            </span>
                        </p>
                        <div class="overlay"></div>
                    </li>
                     <li>
                        <img src="./img/3.png" alt="">
                        <p>
                            <span>
                                是浪费健康的浪费狂蜂浪蝶看，三大利空放大了
                                类似的开发力度卡拉蜂了，的疯狂了的是就了
                            </span>
                        </p>
                        <div class="overlay">
                    </li>
                </ul>
                
                   
                
              
    </div>
  <script src="jquery.js"> </script>
</body>
</html>
<script>
    // 上面边框的效果
    $('.big').hover(function(){
        $(this).find('.overlay').stop().fadeIn(500);
    },function(){
        $(this).find('.overlay').stop().fadeOut(500);
    })
    // 小图的遮罩层和文字效果
    $('li').hover(function(){
      $(this).find('.overlay').stop().fadeTo(500,0.5);
      $(this).find('p').stop().animate({left:0},500);
    },function(){
      $(this).find('.overlay').stop().fadeTo(500,0);
      $(this).find('p').stop().animate({left:-170},500);
    })
</script>